<template>
	<view class="everyWidth">
		<uni-nav-bar :statusBar="true" leftIcon="back" title="添加银行卡" @clickLeft="$tab.back()" :border="false"
			backgroundColor="#fff" color="#000">
		</uni-nav-bar>
		<view class="py-20 text-24 text-FF8400 px-32">
			请输入您的银行卡信息
		</view>
		<view class="px-32 bg-FFF">
			<u--form labelPosition="left" :model="form" ref="form" labelWidth="85px">
				<u-form-item label="持卡人姓名" prop="realName" borderBottom ref="item1">
					<u--input placeholderStyle="color:#999" v-model="form.realName" placeholder="请输入持卡人姓名"
						border="none">
					</u--input>
				</u-form-item>
				<u-form-item label="身份证号" prop="idCard" borderBottom ref="item1">
					<u--input placeholderStyle="color:#999" v-model="form.idCard" border="none"
						placeholder="请输入持卡人身份证号"></u--input>
				</u-form-item>
				<u-form-item label="银行卡号" prop="cardNo" borderBottom ref="item1">
					<u--input placeholderStyle="color:#999" v-model="form.cardNo" type="number" placeholder="请输入银行卡号"
						border="none">
					</u--input>
				</u-form-item>
				<u-form-item label="开户银行" prop="openBank" borderBottom ref="item1">
					<u--input placeholderStyle="color:#999" v-model="form.openBank" placeholder="请输入开户银行" border="none">
					</u--input>
				</u-form-item>
				<u-form-item label="手机号码" prop="phone" type="number" borderBottom ref="item1">
					<u--input placeholderStyle="color:#999" v-model="form.phone" border="none"
						placeholder="请输入银行预留手机号"></u--input>
				</u-form-item>
				<view class="mt-32 pb-48 text-FF0F0F flex align-start">
					<view class="pt-5">
						<u-icon slot="right" name="error-circle" color="#FF0F0F"></u-icon>
					</view>
					<view class="text-24 ml-10">
						银行卡上传必须是本人持有的银行卡，同时要仔细核对卡号是否一致
					</view>
				</view>
			</u--form>
		</view>

		<bottom-btn txt="确认绑卡" @click="submit"></bottom-btn>
		<u-modal :show="show" :title="title" :showCancelButton="true" @confirm="bindTrue" @cancel="bindNo">
			<view class="slot-content">
				<view class="">
					<view class="flex line-h">
						<view class="">
							持卡人姓名:
						</view>
						<view class="">
							{{form.realName}}
						</view>
					</view>
					<view class="flex line-h">
						<view class="">
							身份证号:
						</view>
						<view class="">
							{{form.idCard}}
						</view>
					</view>
					<view class="flex line-h ">
						<view class="">
							银行卡号:
						</view>
						<view class="">
							{{form.cardNo}}
						</view>
					</view>
					<view class="flex line-h">
						<view class="">
							开户银行:
						</view>
						<view class="">
							{{form.openBank}}
						</view>
					</view>
					<view class="flex line-h">
						<view class="">
							手机号码:
						</view>
						<view class="">
							{{form.phone}}
						</view>
					</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				title: '请再次核对信息是否有误',
				form: {
					cardNo: "",
					idCard: "",
					openBank: "",
					phone: "",
					cardName: "",
					realName: '',
				},
				rules: {
					cardNo: [{
						type: 'string',
						required: true,
						message: '请输入银行卡号',
						trigger: ['change']
					}, {
						validator: (rule, value, callback) => {
							return uni.$u.test.digits(value)
						},
						message: "输入正确的银行卡",
						trigger: ["change", "blur"],
					}],
					realName: {
						type: 'string',
						required: true,
						message: '请输入持卡人姓名',
						trigger: ['blur']
					},
					idCard: [{
							required: true,
							message: '请录入持卡人身份证号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.idCard(value)
							},
							message: '请输入正确的身份证号码',
							trigger: ['change', 'blur'],
						}
					],
					cardName: {
						type: 'string',
						required: true,
						message: '请录入银行卡名称',
						trigger: ['blur']
					},
					openBank: {
						type: 'string',
						required: true,
						message: '请录入开户银行',
						trigger: ['blur']
					},
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '请输入银行预留手机号',
							trigger: ['change', 'blur'],
						}
					]
				},
				result: [],
				flag: false
			};
		},
		onLoad(e) {
			if (e.flag) {
				this.flag = true
			}
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			async bindTrue() {
				const res = await this.$Api.user.addBank({
					...this.form
				})
				console.log(res, '银行卡添加')
				this.$modal.msg('绑卡成功!')
				this.$tab.back(1500)
			},
			bindNo() {
				this.show = false
			},
			submit() {
				this.$refs.form.validate().then(res => {
					this.show = true
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			}
		}
	}
</script>

<style lang="scss">
	/deep/ span {
		white-space: nowrap;
	}

	.line-h {
		line-height: 24px;
	}
</style>